<script setup>
import {ref} from 'vue'
import {Plus, QuestionFilled} from "@element-plus/icons-vue";
import requestUtil from "@/utils/request";
import {ElMessage} from "element-plus";
import HostDialog from "@/views/fileDistribution/components/hostDialog.vue";
import OutPutDialog from "@/views/job/components/outPutDialog.vue"

const tableData = ref([])

const textareaCmd = ref('')

const total = ref(0)

const hostDialogVisible = ref(false)
const hostDialogTitle = ref("")

const outPutDialogVisible = ref(false)
const outPutDialogTitle = ref("")
const dialogStatus = ref(0)
const handleHostDialogValue = () => {
  hostDialogTitle.value = '选择主机'
  hostDialogVisible.value = true
}

const handleOutPutDialogValue = () => {
  outPutDialogTitle.value = '执行详情'
  outPutDialogVisible.value = true
}

const initTableData = async () => {
  try {
    const res = await requestUtil.get('host/job')
    const data = res.data
    if (data.code === 200) {
      tableData.value = data.msg
      total.value = data.total
    } else {
      ElMessage.error(data.msg)
    }
  } catch (error) {
    console.error('Error fetching table data:', error)
    ElMessage.error('请求失败，请稍后再试')
  }

}
initTableData()

// 定义接收到的元组
const receivedTuple = ref([]);

const startExecution = async () => {
  handleOutPutDialogValue()
  await initTableData();
}


// 处理子组件传递过来的元组
const handleTuple = (tuple) => {
  receivedTuple.value = []
  tuple.forEach(row => {
    receivedTuple.value.push([row.id, row.hostname])
  })
};
</script>

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="14">
        <el-card class="box-card-hard">
          <template v-slot:header>
            <div class="space-between">
              <div>
                <el-text>
                  <el-text style="color: red">*</el-text>
                  目标主机
                </el-text>
              </div>
              <div>
                <el-text>
                  已选择
                  <el-text style="color: #3e9dff;font-size: 20px;font-weight:bold"> {{ receivedTuple.length }}</el-text>
                  台主机&nbsp;&nbsp;
                </el-text>
                <el-button @click="handleHostDialogValue()" size="default" :icon="Plus" type="primary">
                  添加目标主机
                </el-button>
              </div>
            </div>
          </template>
          <div style="margin-bottom: 10px">
            <el-text>
              <el-text style="color: red">*</el-text>
              执行Shell脚本
            </el-text>
          </div>
          <el-form>
            <el-input
                v-model="textareaCmd"
                style="width: 100%"
                :rows="25"
                type="textarea"
                placeholder="请输入Shell脚本"
            />
            <el-button @click="startExecution()" size="default" :icon="Plus" type="danger"
                       style="margin-top: 10px">
              开始执行
            </el-button>
          </el-form>
        </el-card>
      </el-col>

      <el-col :span="10">
        <el-card class="box-card-hard">
          <template v-slot:header>
            <div class="space-between">
              <div>
                <el-text>
                  执行记录
                  <el-tooltip content="自动清理，保留最近100条记录。" placement="right">
                    <el-icon>
                      <QuestionFilled/>
                    </el-icon>
                  </el-tooltip>
                </el-text>

              </div>
            </div>
          </template>
          <el-table :data="tableData" style="width: 100%" height="600px">
            <el-table-column align="center" prop="user" label="执行用户" width="80"/>
            <el-table-column align="center" prop="hostname" label="主机名称" width="100"/>
            <el-table-column align="center" label="状态" width="80">
              <template v-slot="scope">
                <span v-if="scope.row.status === 1" class="el-tag  el-tag--success">成功</span>
                <span v-else class="el-tag el-tag--danger">失败</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="cmd_content" width="230" label="脚本内容"/>
            <el-table-column align="center" prop="execution_time" label="执行时间" width="150"/>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <HostDialog v-model="hostDialogVisible"
                :dialogVisible="hostDialogVisible"
                @sendTuple="handleTuple"
                :dialogStatus="dialogStatus"
                :dialogTitle="hostDialogTitle"></HostDialog>

    <OutPutDialog v-model="outPutDialogVisible"
                  :dialogVisible="outPutDialogVisible"
                  :receivedTuple="receivedTuple"
                  :textareaCmd="textareaCmd"
                  @initTableData="initTableData"
                  :dialogTitle="outPutDialogTitle"></OutPutDialog>
  </div>
</template>

<style scoped lang="scss">
.space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
}

.public {
  background: rgb(255, 231, 186);
  border-radius: 4px;
  color: rgb(51, 51, 51);
  margin-right: 4px;
  padding: 0 8px;
}

.private {
  background: rgb(186, 231, 255);
  border-radius: 4px;
  color: rgb(51, 51, 51);
  margin-right: 4px;
  padding: 0 8px;
}

.selected-row {
  background-color: #398dff; /* 选中行的背景色 */
}
</style>
